<template>
  <div>
    <div class="app">
      <!-- 头部 -->
      <div class="header" v-show="falg">
        <div class="logo">
          <span class="spanimg" @click="Jump_pre"></span>
        </div>
        <div class="text">{{ chapter_name }}</div>
      </div>
      <!-- 漫画图片 -->
      <div class="pic-list" @click.stop="isfalg">
        <ul ref="imgs">
          <li v-for="(item, index) in lists" :key="index" ref="liimgs">
            <img
              v-for="ele in item.chapter_img_list"
              :key="ele"
              :src="ele"
              alt=""
            />
          </li>
        </ul>
      </div>
      <!-- 尾部 -->
      <div id="read-menu" v-show="falg">
        <a href="Javascript:;" class="download1-btn" @click="Jump_book"></a>

        <a href="Javascript:;" class="catalog-btn" @click="Jump_cata"></a>

        <!-- 回详情 -->
        <a href="Javascript:;" class="download2-btn" @click="Jump_home"></a>
        <!-- 回详情 end -->
      </div>
      
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lists: [],
      chapter_name: "",
      index: 0,
      phsuindex: 2,
      falg: false,
      falgz: false,
      newid:'',
      chapterlist:'',
      chapter_newid:'',
      datalist:''
      //  catalist:'',//存放数据
    };
  },
  props: ["id", "catanewid", ],
  created() {
    this.getread()
    console.log(this.catanewid);
  },
  mounted() {
    window.onscroll = () => {
      if (!this.datalist.next_chapter) {
        return;
      }
      if (!this.$refs.imgs) {
        return;
      } else {
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(this.$refs.liimgs);
        // console.log(this.$refs.imgs.clientHeight);
        scrollTop = parseInt(scrollTop);
        if (scrollTop + 1000 >= this.$refs.imgs.clientHeight) {
          this.lists.push(this.datalist.next_chapter);
          this.chapter_name = this.datalist.next_chapter.chapter_name;
          this.getphsu();
        }
      }
    };
  },
  methods: {
    //回详情页
    Jump_pre() {
      this.$router.go(-1);
      this.$emit("getcatanewid", null);
    },
    //跳转书架
    Jump_book() {
      this.$router.push({ name: "book" });
    },
    //跳转目录
    Jump_cata() {
      this.$router.push({ name: "cata" });
    },
    //返回上一级
    Jump_home() {
      this.$router.go(-1);
      this.$emit("getcatanewid", null);
    },
    isfalg() {
      this.falg = !this.falg;
    },

    
    //下拉加载
    getphsu() {
      let newid = this.datalist.next_chapter.chapter_newid;
      this.$axios({
        url: "https://www.kanman.com/api/getchapterinfov2",
        method: "get",
        params: {
          comic_id: this.id,
          chapter_newid: newid,
          quality: "middle",
        },
      }).then((data) => {
    this.datalist=data.data.data
      });
    },
    //获取章节id
     getread(){
            this.$axios({
                url:'https://www.kanman.com/api/getchapterlist',
               method:'get',
            params:{
                comic_id:this.id,
            }
            }).then(data=>{
              console.log(data.data.data);
                this.chapterlist=data.data.data
                
                this.chapter_newid=this.chapterlist[this.chapterlist.length-1].chapter_newid
                this.getcontent()  
            })
        },
        //获取章节内容
        getcontent(){
          if(this.catanewid!=null){
            this.chapter_newid=this.catanewid
          }
        this.$axios({
                url:'https://www.kanman.com/api/getchapterinfov2',
               method:'get',
            params:{
                comic_id:this.id,
                chapter_newid:this.chapter_newid,
                quality:'middle'
            }
            }).then(data=>{
                this.datalist=data.data.data
                console.log('章节数组',this.datalist);
                this.lists.push(this.datalist.current_chapter)
              this.chapter_name=this.lists[this.index].chapter_name
            })
        },
  },
};
</script>
<style scoped>
/* 头部 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 53px;
  background-color: #fff;
  padding: 13px 13px 0 13px;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #b3b3b3;
  z-index: 9;
}
.logo {
  width: 40px;
  height: 26.5px;
  line-height: 26.5px;
}
.spanimg {
  display: inline-block;
  width: 18px;
  height: 30px;
  background: url(../../public/assets/images-index/zjt.png) no-repeat;
  background-size: 70% 70%;
}
.longspan {
  font-size: 18px;
  display: inline-block;
  color: #333;
  margin-left: 12px;
  font-weight: 800;
  position: relative;
  top: -13px;
}
.text {
  line-height: 23px;
  font-weight: bold;
  font-size: 18px;
}
/* 尾部 */
#read-menu {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  position: fixed;
  z-index: 2;
  left: 0;
  bottom: 0;
  padding: 11px 40px 0px;
  background-color: #fff;
  border-top: 1px solid #b3b3b3;
}

#read-menu .download1-btn {
  width: 28px;
  height: 28px;
  float: left;
  background-image: url(../../public/assets/images-index/book.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#read-menu .catalog-btn {
  width: 28px;
  height: 28px;
  float: left;
  background-image: url(../../public/assets/images-index/ml.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  margin-left: 110px;
}
#read-menu .download2-btn {
  width: 28px;
  height: 28px;
  float: right;
  background-image: url(../../public/assets/images-index/wd.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
a {
  color: #333;
  text-decoration: none;
}
/* 漫画列表 */
ul {
  position: relative;
  z-index: -1;
  list-style: none;
  width: 100%;
}
ul li {
  widows: 100%;
}
ul li img {
  width: 100%;
  vertical-align: bottom;
}

</style>
